<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery百度词条</title>
    <script src="/JS/jquery-3.7.1.js"></script>
    <style>
        input {
            width: 500px;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
            padding-left: 15px;
        }

        .items {
            width: 500px;
            padding: 8px;
            border: 2px solid black;
            margin-top: -10px;
        }
    </style>
</head>

<body>

    <input type="text" value="">
    <div class="items">
        <div class="item">1千卡等于1大卡吗</div>
        <div class="item">1千卡等于1大卡吗</div>
        <div class="item">1千卡等于1大卡吗</div>
        <div class="item">1千卡等于1大卡吗</div>
        <div class="item">1千卡等于1大卡吗</div>
        <div class="item">1千卡等于1大卡吗</div>
    </div>


    <script>
        $(function () {
            $("input").keyup(function () {
                let value = $(this).val()
                $.ajax({
                    url: `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=61027,62325,62341,62347,62371,62426,62475,62494,62456,62454,62453,62450,62575,62640,62674,62677,62686,62689,62619&wd=${value}&csor=2&pwd=a&_=1742871468671`,

                    method: "get",

                    dataType: "jsonp",          //  前端处理跨域问题（前提是该后端允许使用jsonp）
                    success: function (res) {
                        $(".items").empty()
                        if (res.g) {
                            $(".items").css("display", "block")
                            res.g.forEach(function (item, index) {
                                $(".items").append(`<div class="item">${item.p}</div>`)
                            })
                        }
                        else {
                            $(".items").css("display", "none")
                        }


                    }
                })
            })

        })
    </script>







</body>

</html> -->










































<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery百度词条</title>
    <script src="/JS/jquery-3.7.1.js"></script>
    <style>
        input {
            width: 500px;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
            padding-left: 15px;
        }

        .items {
            width: 500px;
            padding: 8px;
            border: 2px solid black;
            margin-top: -10px;
        }
    </style>
</head>

<body>
    <input type="text" value="">
    <script>
        $(function () {
            $("input").keyup(function () {
                let value = $(this).val()
                $.ajax({

                })

            })
        })
    </script>







</body>

</html>